<template lang="html">
  <div class="projectWrraper">


    <text v-if="url == ''" class="projectTitleText">{{title}}</text>

    <div v-else class="projectTitleContent">
      <text class="projectTitleText">{{title}}</text>

      <a v-if="platform == 'Web' && url != ''" :href="desUrl">
        <text class="projectUrlText">AppStore中搜索</text>
      </a>

      <text v-else-if="platform == 'iOS' && url != ''"
        class="projectUrlText"
        @click="intoAppStore"
        >AppStore中查看</text>

    </div>

    <text class="projectNormalText">{{introduce}}</text>
    <text class="projectDutyText">{{duty}}</text>

  </div>
</template>

<script>
export default {
  props: {
    title:{default:'项目名称'},
    url: {default:''},
    introduce: {default: '项目基本介绍'},
    duty: {default: '我的职责'}
  },
  data:function () {

    return {
      platform: weex.config.env.platform
    }
  },
  computed: {
    desUrl: function () {
      if (this.platform == 'iOS') {
        return 'itms-apps:'+this.url;
      } else if (this.platform == 'Web') {
        return 'https:'+this.url;
      }
    }
  },

  methods: {
    intoAppStore: function () {
      //调用iOS的跳转方法
      const event = weex.requireModule('event');
      event.openInAppstoreWithURL(this.desUrl);
    }
  }
}
</script>

<style lang="css" scoped>

.projectWrraper {
  padding-bottom: 20px;
}

.projectTitleContent {
  flex-direction: row;
  align-items: center;
}

.projectTitleText {
  font-size: 28px;
  font-weight: bold;
  margin: 15px;
}

.projectDutyText {
  font-size: 25px;
  margin: 15px;
  color: #ff6600;
}

.projectNormalText {
    font-size: 25px;
    color: #000000;
    margin: 15px;
}

.projectUrlText {
    font-size: 25px;
    color: #0000ff;
    text-decoration:underline;
}

</style>
